<template>
	<div class="login-wrap">
		<div class="header"></div>
		<div class="ms-login">
			<div class="ms-title">后台管理系统</div>
			<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
				<el-form-item prop="username">
					<el-input v-model="param.username" placeholder="请输入用户名">
						<!-- <el-button slot="prepend" icon="el-icon-lx-people"></el-button> -->
						<i slot="prefix" class="el-icon-lx-people"></i>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" @keyup.native.enter="submitForm()" placeholder="请输入密码" v-model="param.password">
						<!-- <el-button slot="prepend" icon="el-icon-lx-lock"></el-button> -->
						<i slot="prefix" class="el-icon-lx-lock"></i>
					</el-input>
				</el-form-item>
				<div class="login-btn">
					<el-button type="primary" @click="submitForm()">登录</el-button>
				</div>
				<!-- <p class="login-tips">Tips : 用户名和密码随便填。</p> -->
			</el-form>
		</div>
	</div>
</template>

<script>
	import qs from 'qs';
	import axios from 'axios';
	import Cookies from 'js-cookie';
	import md5 from 'js-md5';
	import { mapGetters, mapMutations } from 'vuex';
	import { debounce, throttle } from '@/utils/utils.js';
	export default {
		data: function () {
			return {
				param: {
					username: '',
					password: ''
				},
				rules: {
					username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
					password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
				}
			};
		},
		computed: {
			...mapGetters({
				sidebarData: 'sidebarData'
			})
		},
		methods: {
			...mapMutations(['SET_TAGSLIST', 'SET_SLIDEBAR_DATA']),
			submitForm: throttle(function () {
				this.$refs.login.validate((valid) => {
					console.log(valid);
					let val = {
						grant_type: 'password',
						username: this.param.username.trim(),
						password: md5(this.param.username.trim() + this.param.password.trim()),
						scope: 'smsapi',
						client_id: 'password',
						client_secret: '1ef130b4-e4f8-4d30-8743-7cc09ce249d6'
					};
					let data = {
						name: this.param.username.trim(),
						status: '200'
					};
					if (valid) {
						this.login(qs.stringify(val))
							.then(() => {
								// console.log(2222);

								this.getUserInfo(qs.stringify(data)).catch((err) => {
									console.dir(err);
								});
							})
							.catch((err) => {
								this.$message.error(err.data.error);
								console.dir(err);
							});
					} else {
						this.$message.error('请输入账号和密码');
						console.log('error submit!!');
						return false;
					}
				});
			}, 1000),

			login(userInfo) {
				return new Promise((resolve, reject) => {
					this.login_(userInfo)
						.then(({ data: res }) => {
							console.log(res);
							// commit('SET_TOKEN', res.access_token);
							// localStorage.setItem('token', res.access_token);

							console.log(Cookies.get('access_token'));
							Cookies.remove('access_token');
							Cookies.remove('refresh_token');
							console.log(Cookies.get('access_token'));

							Cookies.set('access_token', res.access_token, { expires: res.expires_in / 60 / 60 / 24 });
							Cookies.set('refresh_token', res.refresh_token, { expires: 15 });

							console.log(Cookies.get('access_token'));

							localStorage.setItem('region', res.region);
							localStorage.setItem('channel', res.channel);

							resolve();
						})
						.catch((err) => {
							console.dir(err);
							this.$message.error({
								message: err.response.data.message,
								duration: 1500
							});
							reject(err);
						});
				});
			},
			login_(data) {
				return this.$http[3]({
					url: '/oauth/token',
					method: 'post',
					data,
					headers: {
						'Content-type': 'application/x-www-form-urlencoded',
						Authorization: 'Basic cGFzc3dvcmQ6MWVmMTMwYjQtZTRmOC00ZDMwLTg3NDMtN2NjMDljZTI0OWQ2'
					}
				});
			},
			getUserInfo(data) {
				return new Promise((resolve, reject) => {
					this.getUserInfo_(data)
						.then(({ data: res }) => {
							console.log('getinfo:', res);
							// 用于显示
							localStorage.setItem('ms_username', res.data.name);
							localStorage.setItem('roles', JSON.stringify(res.data.roles));
							localStorage.setItem('lastDateTime', this.$formatDate('Y-M-D'));

							// commit('SET_ROLES', roles);
							this.$message.success(res.message);
							this.SET_TAGSLIST([]);
							this.$router.replace('/');
							if (!(Object.prototype.toString.call(this.sidebarData) === '[object Array]' && this.sidebarData.length === 0)) {
								this.SET_SLIDEBAR_DATA([]);
							}

							if (Object.prototype.toString.call(this.sidebarData) === '[object Array]' && this.sidebarData.length === 0) {
								if (Cookies.get('access_token') || Cookies.get('refresh_token')) {
									// this.init();
									if (this.sidebarData.length === 0) {
										this.$getSidebar.call(this);
									}
								}
							}

							resolve(data);
						})
						.catch((error) => {
							console.dir(err);
							this.$message.error(err.message);
							reject(error);
						});
				});
			},
			getUserInfo_(data) {
				console.log(data);
				return this.$http[4]({
					url: '/user/info' + '?' + data,
					method: 'get'
					// params: {

					// }
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.login-wrap {
		position: relative;
		width: 100%;
		height: 100%;
		background-image: url(../../../assets/img/login-bg.jpg);
		background-size: 100%;
	}
	.ms-title {
		width: 100%;
		line-height: 50px;
		text-align: center;
		font-size: 20px;
		color: #fff;
		border-bottom: 1px solid #ddd;
	}
	.ms-login {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 350px;
		margin: -190px 0 0 -175px;
		border-radius: 5px;
		background: rgba(255, 255, 255, 0.3);
		overflow: hidden;
	}
	.ms-content {
		padding: 30px 30px;
	}
	.login-btn {
		text-align: center;
	}
	.login-btn button {
		width: 100%;
		height: 36px;
		margin-bottom: 10px;
	}
	// .login-tips {
	//     font-size: 12px;
	//     line-height: 30px;
	//     color: #fff;
	// }
</style>
